<template>
  <div class="settings-security">
    <List>
      <ListItem v-for="(item, index) in list" :key="index">
        <ListItemMeta :description="item.desc" :title="item.title"/>
        <template #extra>
          <el-button link type="primary" @click="handleClick(item)">{{ item.btnText }}</el-button>
        </template>
      </ListItem>
    </List>
  </div>
</template>

<script lang="ts" setup>
import { List, ListItem, ListItemMeta } from '@/components/list';
import { ElMessage } from 'element-plus';

const list = [
  {
    key: 'password',
    title: '账号密码',
    desc: '绑定手机和邮箱，并设置密码，账号更安全',
    btnText: '修改',
  },
  {
    key: 'phone',
    title: '安全手机',
    desc: '已绑定：158******40',
    btnText: '修改',
  },
  {
    key: 'email',
    title: '安全邮箱',
    desc: '您暂未设置安全邮箱，绑定邮箱可以找回密码等等',
    btnText: '修改',
  },
];

const handleClick = (item: any) => {
  ElMessage.info('点击了按钮: ' + item.key);
};
</script>

<style lang="scss" scoped>
.settings-security {
  :deep(.list) {
    .list-item {
      padding: 12px;

      .list-item-meta {
        .list-item-meta-title {
          font-weight: 700;
        }

        .list-item-meta-description {
          margin-top: 8px;
        }
      }
    }
  }
}
</style>
